<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>element</title>
        <link rel="stylesheet" href="css/base.css" />
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
        <style type="text/css">
            body {
                margin: 0 auto;
                max-width: 720px;
                padding: 0 10px;
                text-align: left;
            }

            .title {
                color: red;
                font-weight: bold;
                padding: 10px 0 0;
            }

            h1 {
                text-align: center;
                font-size: 18px;
                padding: 40px 0 0;
            }

            .description {
                padding: 10px 0 40px;
            }

            h2 {
                font-size: 15px;
                font-weight: normal;
            }

            .wrapper {
                padding: 20px 0 0;
                line-height: 24px;
            }

            .tab {
                padding: 15px 0;
                border-bottom: 1px solid #999;
            }

            .tab:last-child {
                border-bottom: 0;
            }

            .param {
                word-break: break-all;
            }

            .action {
                padding: 10px 0 0;
            }

            .action button {
                padding: 5px 20px;
            }

            .select-ipt {
                position: relative;
                padding: 0 0 0 105px;
            }

            .select-ipt .tt {
                position: absolute;
                width: 105px;
                word-wrap: break-word;
                word-break: break-all;
                left: 0;
                top: 0;
            }

            .weui_input {
                width: 100%;
                border: 0;
                outline: 0;
                -webkit-appearance: none;
                background-color: transparent;
                height: 24px;
                line-height: 24px;
            }

            .pageAnimationScale {
                float: left;
                margin-right: 10px;
                width: 80px;
            }

            /*.weui-actionsheet-top-shade{*/
            /*opacity: .7 !important;*/
            /*}*/

            /*.weui-actionsheet-top{*/
            /*position: fixed!important;*/
            /*left: 0;*/
            /*top: 0;*/
            /*-webkit-transform: translateY(-100%);*/
            /*transform: translateY(-100%);*/
            /*-webkit-backface-visibility: hidden;*/
            /*backface-visibility: hidden;*/
            /*z-index: 5000;*/
            /*width: 100%;*/
            /*background-color: #fff;*/
            /*-webkit-transition: -webkit-transform .3s;*/
            /*transition: -webkit-transform .3s;*/
            /*}*/

            /*.weui-actionsheet-top-toggle{*/
            /*-webkit-transform: translateY(0);*/
            /*transform: translateY(0);*/
            /*}*/

            .weui-page-scale .page-scale .slide2 {
                box-sizing: content-box;
                width: 100%;
                height: 100%;
                position: relative;
                transition-property: transform, -webkit-transform;
            }

            .weui-page-scale .page-scale .slide2 li {
                -webkit-flex-shrink: 0;
                -ms-flex: 0 0 auto;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                position: relative;
            }

            .weui-page-scale .page-scale .slide2 li .container {
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                overflow: hidden;
            }

            .weui-page-scale .page-scale .slide2 li .container img {
                max-width: 100%;
                margin-top: -30px;
            }

            .slide {
                position: relative;
                z-index: 1;
            }

            .slide li {
                flex-shrink: 0;
                height: 74.666667vw;
                position: relative;
                transform: translate3d(0, 0, 0);
                z-index: 1;
            }

            .slide li .img {
                height: 100%;
                background-size: cover;
                background-position: center;
            }
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <!--    <script src="https://unpkg.com/http-vue-loader"></script>-->
    </head>
    <body>
        <h1><a href="https://element.eleme.io/#/zh-CN">element-ui官网</a></h1>
        <div class="description">主要用于PC段，移动端没有适配</div>
        <div id="app" class="page">
            <template>
                <el-row>
                    <el-button>默认按钮</el-button>
                    <el-button type="primary">主要按钮</el-button>
                    <el-button type="success">成功按钮</el-button>
                    <el-button type="info">信息按钮</el-button>
                    <el-button type="warning">警告按钮</el-button>
                    <el-button type="danger">危险按钮</el-button>
                </el-row>
                <el-button type="text" @click="open">点击打开 Message Box</el-button>
            </template>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: function () {
                    return {
                        visible: false,
                        input: '444'
                    };
                },
                components: {
                    // 'elButton':httpVueLoader('component/button.vue'),
                },
                methods: {
                    open() {
                        this.$alert('这是一段内容', '标题名称', {
                            confirmButtonText: '确定',
                            callback: (action) => {
                                this.$message({
                                    type: 'info',
                                    message: `action: ${action}`
                                });
                            }
                        });
                    }
                }
            });
        </script>
    </body>
</html>
